import React from 'react'
import '../css/bootstrap.css'
import '../css/header-nav.less'
class HeaderNav extends React.Component {
    render() {
        return(
            <div className="app-header">
                <header>
                    <div className="headerTop">
                        <p className="logo">去吧二货</p>
                        <div className="headerGuide">
                            <p className="register">
                                <a href="./register.html">注册</a>
                            </p>
                            <p className="login">
                                <a href="./login.html">登录</a>
                            </p>
                        </div>
                    </div>
                    <div className="headerDown">
                        <div className="headerLeft">
                            <div className="menuName">
                                <p className="cata">所有商品分类 · <small>Catagories</small></p>
                                <div className="menuDiv">
                                    <a href="#">
                                        <div className="cataDiv even">
                                            <img src={require('../images/header/clothPT.png')} alt="服饰配饰"/>
                                            <p>服饰配饰</p>
                                        </div>
                                    </a>
                                    <a href="#">
                                        <div className="cataDiv odd">
                                            <img src={require('../images/header/phonePT.png')} alt="手机数码"/>
                                            <p>手机数码</p>
                                        </div>
                                    </a>
                                    <a href="#">
                                        <div className="cataDiv even">
                                            <img src={require('../images/header/bookPT.png')} alt="图书专区"/>
                                            <p>图书专区</p>
                                        </div>
                                    </a>
                                    <a href="#">
                                        <div className="cataDiv odd">
                                            <img src={require('../images/header/sportPT.png')} alt="运动文体"/>
                                            <p>运动文体</p>
                                        </div>
                                    </a>
                                    <a href="#">
                                        <div className="cataDiv even">
                                            <img src={require('../images/header/bikePT.png')} alt="自行车"/>
                                            <p>自行车</p>
                                        </div>
                                    </a>
                                    <a href="#">
                                        <div className="cataDiv odd">
                                            <img src={require('../images/header/machinePT.png')} alt="家用电器"/>
                                            <p>家用电器</p>
                                        </div>
                                    </a>
                                    <a href="#">
                                        <div className="cataDiv even">
                                            <img src={require('../images/header/musicPT.png')} alt="乐器"/>
                                            <p>乐器</p>
                                        </div>
                                    </a>
                                    <a href="#">
                                        <div className="cataDiv odd">
                                            <img src={require('../images/header/morePT.png')} alt="其他"/>
                                            <p>其他</p>
                                        </div>
                                    </a>

                                </div>
                            </div>
                            <div className="headerButton">
                                <a href="./index.html">
                                    <div className="indexButton"></div>
                                </a>
                            </div>
                            <div className="headerButton">
                                <a href="./findGoods.html">
                                    <div className="buySection"></div>
                                </a>
                            </div>
                        </div>
                        <div className="headerRight">
                            <div className="searchDiv">
                                <form action="#">
                                    <fieldset className="searchField">
                                        <input type="text" className="searchContent" name="key"/>
                                        <button className="searButton" type="submit"></button>
                                    </fieldset>
                                </form>
                            </div>
                            <a href="./saleGoods.html"><button className="saleButton">二货出售</button></a>
                            <a href="./wantGoods.html"><button className="buyButton">我要求售</button></a>
                        </div>
                    </div>
                </header>
            </div>
        )
    }
}


export default HeaderNav